import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import customerIcon from '@/assets/channel-management/detail/customer-icon.png'
import systemIcon from '@/assets/channel-management/detail/system-icon.png'
import RenderDescription, {
    type DescItemDto
} from '@/components/render-descriotion/Index'
import type { InsureCompanyDetailDto } from '@/api/insCompany/types'
import { Image } from 'ant-design-vue'
import { InsuranceInvokeTypeEnum, InsureTypeCnEnum } from '@/const/enum'
@Component
export class BasicInfoView extends Render {
    @Prop() detailData!: InsureCompanyDetailDto


    get invokeName() {
        const list = this.detailData.invokeType?.split(',').map(i => {
            return InsuranceInvokeTypeEnum[Number(i)]
        }) ?? []
        return list.join('、')
    }

    get customerInfoData() {
        return [
            {
                label: '保司名称',
                value: this.detailData.name
            },
            {
                label: 'logo',
                slot: () => {
                    return this.detailData.fileUrl ? <Image width={38} height={38} src={this.detailData.fileUrl} preview={false}></Image> : '--'
                }
            },
            {
                label: '保险产品',
                value: InsureTypeCnEnum[this.detailData.insureType],
            },
            {
                label: '保险公司',
                value: this.detailData.insureName,
            },
            {
                label: '渠道来源',
                value: this.detailData.source,
            },
            {
                label: '数据对接',
                value: this.invokeName,
            },
            {
                label: '推送规则',
                value: this.detailData.ruleName,
            },
        ] as DescItemDto[]
    }
    get systemInfoData() { 
        return [
            {
                label: '客户ID：',
                value: this.detailData.id,
            },
            {
                label: '创建人：',
                value: this.detailData.createUserName,
            },
            {
                label: '创建时间：',
                value: this.detailData.createTime,
            },
            {
                label: '保险状态：',
                value: this.detailData.enable ? '启用' : '禁用',
            },
            {
                label: '更新人：',
                value: this.detailData.updateUserName,
            },
            {
                label: '更新时间：',
                value: this.detailData.updateTime,
            }
        ] as DescItemDto[]
    }
    
    render() {
        return (
            <div>
                <div>
                    <div class="flex items-center mt-20">
                        <img src={ customerIcon } class="w-16 h-16 mr-8" alt="" />
                        <div class="text-gray-light-600 text-lg font-semibold">客户资料</div>
                    </div>
                    <div class="mt-20">
                        <RenderDescription renderData={this.customerInfoData} row={3} />
                    </div>
                </div>
                <div class="mt-40">
                    <div class="flex items-center mt-20">
                        <img src={ systemIcon } class="w-16 h-16 mr-8" alt=""/>
                        <div class="text-gray-light-600 text-lg font-semibold">系统信息</div>
                    </div>
                    <div class="mt-20">
                        <RenderDescription renderData={this.systemInfoData} row={3} />
                    </div>
                </div>
            </div>
        )
    }

}

export default toNative<{ detailData: InsureCompanyDetailDto}, {}>(BasicInfoView)